<template>
  <input type="text" v-model="person.firstname" />
  <input type="text" v-model="person.lastname" />
  <span>全名:{{ person.fullname }}</span>
  <input type="text" v-model="person.fullname" />
</template>
  
<script>
import { reactive,computed } from "vue";
export default {
  name: "Demo",
  setup() {
    let person = reactive({
      firstname: "林",
      lastname: "润钿",
    });

    //只是读取 不能修改
    /* person.fullname=computed(()=>{
      return person.firstname+person.lastname
    }) */

    //这里是个对象了
    person.fullname=computed({
      get()
      {
        return person.firstname+'-'+person.lastname
      },
      set(value){
        const nameArr=value.split('-')
        person.firstname=nameArr[0]
        person.lastname=nameArr[1]
      }        
    })

    return {
      person,
    };
  },
};
</script>
  
  <style>
</style>
  